<template>
  <div class="box-yuyi">
    <div class="box-left" v-loading="treeLoading">
      <avue-tree :option="treeOption"
                 :data="treeData"
                 @node-click="nodeClick">
        <div class="custom-tree-node show-hide" slot-scope="{ node, data }">
          <span onselectstart="return false"><i :class="data.icon"/> {{ data.name }}</span>
        </div>
      </avue-tree>
    </div>
    <section class="box-content">

      <div class="head-search">
        <search @onSubmit="onSearch">
          <el-form-item label="移交接收字段">
            <el-input placeholder="请输入内容" clearable v-model="searchData.transferColumn" size="small"></el-input>
          </el-form-item>
        </search>
      </div>
      <div class="fun-btn">
        <el-button size="small"
                   type="primary"
                   @click="handleAddEdit"
                   icon="el-icon-circle-plus-outline">新增
        </el-button>
        <el-button size="small" type="danger" @click="handleDel" plain icon="el-icon-delete">删除</el-button>
      </div>

      <avue-crud :option="option"
                 :table-loading="loading"
                 :data="tableData"
                 :page.sync="page"
                 ref="crud"
                 @current-change="handleCurrentChange"
                 @size-change="handleSizeChange"
                 @selection-change="selectionChange"
                 @row-save="handleRowSave"
                 @row-update="handleRowUpdate"
      ><!--@on-load="onLoad"-->
      </avue-crud>
    </section>
  </div>
</template>

<script>
import Search from '../../../../../components/search/search'
import { getEntityCategoryList } from '../../../../../api/category/category'
import {
  addTransferReceiveList,
  delTransferReceiveList,
  editTransferReceiveList,
  getTransferReceiveList
} from '../../../../../api/transferReceiveSet/transferReceive'

export default {
  name: 'transferReceive', // 移交接收设置
  components: { Search },
  props: {
    treeLoading: {
      type: Boolean,
      default: true
    },
    treeData: {
      type: Array,
      default: () => ([])
    }
  },
  // 菜单设置（下级菜单）
  data () {
    return {
      treeOption: {
        addBtn: false,
        defaultExpandAll: true,
        // accordion: true, // 只展开一层
        props: {
          labelText: '标题',
          label: 'name',
          value: 'id',
          children: 'children'
        }
      },
      idCategory: '',
      idTable: '',
      searchData: {
        transferColumn: ''
      },
      params: [],
      tableSelected: [],
      loading: false,
      page: {
        pageSize: 20,
        currentPage: 1,
        pageSizes: [20, 40, 60, 80],
        total: 0
      },
      tableData: [],
      metadata: [] // 元数据
    }
  },
  computed: {
    option () {
      return {
        align: 'left',
        menuAlign: 'center',
        header: false,
        border: true,
        size: 'medium',
        height: 'calc(100vh - 305px)',
        index: true, // 显示序号
        indexLabel: '序号', // 显示序号
        selection: true, // 多选
        // editBtn: false, // 行内编辑按钮
        delBtn: false, // 行内删除按钮
        viewBtn: false, // 行内查看按钮
        menuWidth: 120,
        labelWidth: 130,
        column: [
          {
            label: '移交接收字段',
            prop: 'transferColumn',
            overHidden: true,
            sortable: true,
            width: 150,
            span: 24,
            rules: [
              {
                required: true,
                message: '请输入移交接收字段',
                trigger: 'blur'
              }
            ]
          },
          {
            label: '元数据字段',
            prop: 'mdCode',
            overHidden: true,
            type: 'select',
            width: 150,
            span: 24,
            dicData: this.metadata,
            props: {
              label: 'mdName',
              value: 'mdCode'
            }

          },
          {
            label: '特殊公式',
            prop: 'expressionValue',
            type: 'select',
            overHidden: true,
            minWidth: 200,
            span: 24,
            dicUrl: '/yuyi-config-boot/api/config/dictData/child?dictTypeName=special_formula',
            props: {
              label: 'dictLabel',
              value: 'dictValue'
            }
          },
          {
            label: '备注',
            prop: 'remark',
            type: 'textarea',
            span: 24,
            minRows: 4,
            maxlength: 200,
            showWordLimit: true,
            hide: true
          }
        ]
      }
    }
  },
  mounted () {
  },
  methods: {
    getElementData () {
      const param = {
        pageNo: 1,
        pageSize: 1000,
        params: [{
          name: 'idTable',
          op: 'eq',
          value: this.idTable
        }]
      }
      getEntityCategoryList(param).then(res => {
        this.metadata = res.data.data.list
      })
    },
    onLoad () {
      // 加载列表
      this.loading = true
      const query = {
        pageSize: this.page.pageSize,
        pageNo: this.page.currentPage,
        params: [{
          name: 'idCategory',
          op: 'eq',
          value: this.idCategory
        }, {
          name: 'idTable',
          op: 'eq',
          value: this.idTable
        }]
      }
      query.params = query.params.concat(this.params)

      getTransferReceiveList(query).then(res => {
        this.tableData = res.data.data.list
        this.page.total = res.data.data.total
        this.loading = false
      })
    },
    handleCurrentChange (currentPage) {
      // 翻页 第几页
      this.page.currentPage = currentPage
      this.onLoad()
    },
    handleSizeChange (pageSize) {
      // 翻页 一页多少条
      this.page.pageSize = pageSize
      this.onLoad()
    },
    onSearch () {
      // 搜索
      this.page.currentPage = 1
      this.page.pageSize = 20
      this.params = []
      Object.keys(this.searchData).forEach((key) => {
        if (this.searchData[key]) {
          this.params.push({
            op: 'like',
            name: key,
            value: this.searchData[key]
          })
        }
      })
      if (this.idCategory || this.idTable) {
        this.onLoad()
      } else {
        this.$message.warning('请选择左侧门类之后进行查询操作')
      }
    },
    handleAddEdit () {
      // 打开新增窗口
      if (this.idTable || this.idCategory) {
        this.$refs.crud.rowAdd()
      } else {
        this.$message.warning('请选择左侧门类之后进行新增操作！')
      }
    },
    handleRowSave (row, done, loading) {
      // 保存新增
      console.log(row)
      row.idCategory = this.idCategory
      row.idTable = this.idTable
      row.mdName = row.$mdCode
      row.expressionName = row.$expressionValue

      addTransferReceiveList(row).then(() => {
        this.onLoad()
        this.$message({
          type: 'success',
          message: '操作成功!'
        })
        done()
      }).catch(() => {
        loading()
      })
    },
    handleRowUpdate (row, index, done, loading) {
      // 编辑修改
      editTransferReceiveList(row).then(() => {
        this.onLoad()
        this.$message({
          type: 'success',
          message: '操作成功!'
        })
        done()
      }).catch(() => {
        loading()
      })
    },
    selectionChange (val) {
      // 选择表格
      this.tableSelected = val
    },
    handleDel () {
      if (this.tableSelected.length < 1) {
        this.$message.warning('请至少勾选一条需要删除的信息！')
      } else {
        this.$confirm('此操作将永久删除选中的信息, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          const ids = []
          this.tableSelected.map((item) => {
            ids.push(item.id)
          })
          delTransferReceiveList(ids).then(res => {
            this.loading = true
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.onLoad()
          })
        }).catch(() => {
        })
      }
    },
    nodeClick (data) {
      // 选择tree节点
      this.idCategory = data.idCategory
      this.idTable = data.table && data.table.length > 0 ? data.table[0].idTable : ''
      this.onLoad()
      this.getElementData()
    }
  }
}
</script>

<style lang="scss" scoped>
  .box-yuyi {

    .box-left, .box-content {
      height: calc(100vh - 155px);
    }

    .box-left {
      ::v-deep .avue-tree {
        height: calc(100% - 5px);
      }

      ::v-deep .el-tree-node__content {
        &:hover {
          .tree-btn {
            display: inline-block;
          }
        }
      }

      .tree-btn {
        margin-left: 20px;
        display: none;

        .btn:hover {
          opacity: 0.8;
        }
      }
    }

    .box-content {
      hgroup.title {
        color: #000;
        padding: 5px 0 10px 0;
      }

      ::v-deep .search-btn {
        margin-top: 0px;
      }

      .reset {
        margin-top: 5px;
      }
    }
  }
</style>
